<template>
	<view class="page">
		<nav-bar title="储值卡消费记录" bgColor="#FFF" titleColor="#000"></nav-bar>
		<view class="search" @click="show=true">
			<u-input placeholder="请选择年月" disabled="true" disabledColor="#fff" v-model="search">
				<template slot="prefix">
					<uni-icons type="calendar-filled" size="22" color="#909399"></uni-icons>
				</template>
			</u-input>
		</view>
		<scroll-view scroll-y :style="{ height: mainHeight }">
			<view v-if="isLoading" class="common-loading">
				<image class="loading-img" :src="baseIconUrl + 'icon_loading.png'" />
			</view>
			<view class="card" v-else-if="recordList && recordList.length">
				<view class="month" v-for="(item, index) in recordList" :key="index">
					<view class="month-item">
						{{item.month}}
					</view>
					<view class="data" v-for="(items, index) in item.dataChildren" :key="index">
						<view class="data-once">
							<view style="display: flex;align-items: center;">
								<image class="image" src="../../static/icon/xiaofei.png" mode=""></image>
								<view class="">{{'储值卡'+detailTypeList[items.detailType-1]}}</view>
							</view>
							<view class="inte">
								<!-- {{ $methods.handlePositiveNumber(items.principal, items.gift) }} -->
								{{items.sumMoney}}
							</view>
						</view>
						<view class="data-tiwice">
							<view class="time">
								{{ items.createTime.split('.')[0].replace('T',' ') }}
							</view>
							<view class="order">
								<span style="color: #000;margin-right: 15rpx;">订单号:</span>{{ items.orderId }}
							</view>

						</view>
						<view class="data-info">
							<view class="order storeName">
								消费门店: <span>{{ items.storeName }}</span>
							</view>
							<view class="order technicianName" v-if="items.technicianName">
								技师:<span>{{ items.technicianName }}</span>
							</view>
							<view class="itemName order" v-if="items.itemName">
								项目:<span>{{ items.itemName }}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="common-no-data">
				<image class="no-data-img" :src="baseImgUrl + 'img_no_project.png'" alt="" />
				<view class="text">暂无消费记录</view>
			</view>
		</scroll-view>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" :formatter="formatter" mode="year-month"
			@cancel="show=false" @confirm="confirm"></u-datetime-picker>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar'
	import api_storedCard from '@/api/storedCard'
	import pageConfig from '@/config'
	export default {
		components: {
			NavBar
		},
		data() {
			const currentDate = new Date()
			let value = currentDate.getFullYear() + '-' + ('0' + (currentDate.getMonth() + 1)).slice(-2)
			return {
				search: '',
				value1: value,
				show: false,
				baseImgUrl: pageConfig.baseImgUrl,
				baseIconUrl: pageConfig.baseIconUrl,
				regionId: '',
				recordList: [],
				isLoading: false,
				mainHeight: '',
				detailTypeList: ["充值", "消费", "退卡", "转赠", "退款"],
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad(options) {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight
			this.regionId = options.id
			this.getRecordList()
		},
		methods: {
			confirm(timestamp) {
				const date = new Date(timestamp.value);
				console.log(timestamp.value, date);
				this.search = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2);
				this.show = false
				this.getRecordList()
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},
			getRecordList() {
				this.recordList = []
				this.isLoading = true
				const params = {
					carId: this.regionId,
					queryDate: this.search
				}
				api_storedCard.fetchRecordList(params).then(res => {
					this.isLoading = false
					if (res.code !== 200) return
					const resData = res.data
					for (let key in resData) {
						this.recordList.push({
							month: key,
							dataChildren: resData[key]
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;

		.search {
			margin: 0 40rpx;
		}

		.card {
			padding: 16rpx;
			// display: flex;
			// flex-direction: column;
			// align-items: center;

			.month-item {
				width: 673rpx;
				height: 62rpx;
				background: #F6F6F6;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				margin: 0 auto;
				line-height: 62rpx;
				padding-left: 16rpx;

			}

			.data {
				width: 676rpx;
				margin: 20rpx auto;
				font-size: 34rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				padding: 25rpx;
				box-shadow: 0 0 5px #e1e1e1;
				border-radius: 5px;
				box-sizing: border-box;


				.data-once {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #000;
					height: 50rpx;

					.image {
						width: 35rpx;
						height: 35rpx;
						margin-right: 10rpx;
					}

					.inte {
						color: #7d3228;
					}
				}

				.data-tiwice {
					display: flex;
					font-size: 26rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					justify-content: space-between;
					align-items: center;
					color: #adadad;
					border-bottom: 1px solid #b6b6b6;
					height: 80rpx
				}

				.data-info {
					font-size: 27rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					// font-weight: 400;
					margin-top: 5rpx;
					color: #adadad;

					.order {
						width: auto;
						height: 50rpx;
						line-height: 50rpx;

						span {
							color: #000;
							margin-left: 10rpx;
						}

					}
				}
			}
		}
	}
</style>